
import React from 'react';
import { Flex, Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import styles from './index.less';

class WitNewsItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      carouselNumber1: 1,
      initialCarouselHeight1: '0rem',
      carouselNumber2: 1,
      initialCarouselHeight2: '0rem',
    };
  }

  handleTrend = (index) => {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: `/infor/trendDetail`,
        query: { id: index },
      })
    );
  };

  handleMien = (index) => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/infor/mienDetail`,
        query: { id: index }
      })
    );
  }


  render() {
    const { index, item, imgsNum } = this.props;

    return (
      <div>
        {
          imgsNum === 1 &&
          <Flex key={index} onClick={() => this.handleTrend(item.id)} justify="between" align="top" style={{ borderTop: "0.01rem solid #bbb", boxSizing: "border-box", width: "100%", padding: "0.3rem 0.3rem", background: "#fff" }}>
            <div style={{ width: "30%" }}>
              <img
                src={item.img}
                alt=""
                style={{ width: "100%", height: "1.5rem", verticalAlign: "top" }}
              />
            </div>
            <div style={{ width: "67%", height: "1.5rem", position: "relative" }}>
              <div className={styles.textEllipsis} style={{ width: "100%", height: "0.9rem", lineHeight: "0.45rem", fontSize: "0.3rem", letterSpacing: "0.02rem", overflow: "hidden" }}>
                {item.title}
              </div>
              <Flex justify="start" align="center" style={{ width: "100%", position: "absolute", bottom: "0", fontSize: "0.28rem" }}>
                <div style={{ width: "30%", color: "#999" }}>
                  <Flex justify="start" align="center">
                    <span>查看</span>
                    <span style={{ marginLeft: "0.05rem" }}>1425</span>
                  </Flex>
                </div>
              </Flex>
            </div>
          </Flex>
        }
        {
          imgsNum === 3 &&
          <div onClick={() => this.handleMien(number1)} style={{ borderTop: "0.01rem solid #ddd", boxSizing: "border-box", width: "100%", padding: "0.3rem 0.3rem", background: "#fff" }}>
            <div style={{ width: "100%", lineHeight: "0.45rem", fontSize: "0.35rem", letterSpacing: "0.02rem", overflow: "hidden" }}>
              {item.title}
            </div>
            <Flex key={index} justify="between" align="top" style={{ width: "100%", marginTop: "0.2rem" }}>
              <div style={{ width: "32%" }}>
                <img
                  src={item.img[0]}
                  alt=""
                  onLoad={() => {
                    window.dispatchEvent(new Event("resize"));
                    this.setState({
                      initialHeight: null,
                    });
                  }}
                  style={{ width: "100%", height: "1.5rem", verticalAlign: "top" }}
                />
              </div>
              <div style={{ width: "32%" }}>
                <img
                  src={item.img[1]}
                  alt=""
                  onLoad={() => {
                    window.dispatchEvent(new Event("resize"));
                    this.setState({
                      initialHeight: null,
                    });
                  }}
                  style={{ width: "100%", height: "1.5rem", verticalAlign: "top" }}
                />
              </div>
              <div style={{ width: "32%" }}>
                <img
                  src={item.img[2]}
                  alt=""
                  onLoad={() => {
                    window.dispatchEvent(new Event("resize"));
                    this.setState({
                      initialHeight: null,
                    });
                  }}
                  style={{ width: "100%", height: "1.5rem", verticalAlign: "top" }}
                />
              </div>
            </Flex>
            <div style={{ width: "100%", color: "#999", marginTop: "0.2rem", fontSize: "0.3rem" }}>
              <span style={{ marginRight: "0.5rem" }}>开展活动组织名称</span>
              <span>2天前</span>
            </div>
          </div>
        }
        {
          imgsNum === 1 &&
          <Flex key={index} onClick={() => this.handleTrend(item.id)} justify="between" align="top" style={{ borderTop: "0.01rem solid #bbb", boxSizing: "border-box", width: "100%", padding: "0.3rem 0.3rem", background: "#fff" }}>
            <div style={{ width: "30%" }}>
              <img
                src={item.img}
                alt=""
                style={{ width: "100%", height: "1.5rem", verticalAlign: "top" }}
              />
            </div>
            <div style={{ width: "67%", height: "1.5rem", position: "relative" }}>
              <div className={styles.textEllipsis} style={{ width: "100%", height: "0.9rem", lineHeight: "0.45rem", fontSize: "0.36rem", letterSpacing: "0.02rem", overflow: "hidden" }}>
                {item.title}
              </div>
              <Flex justify="start" align="center" style={{ width: "100%", position: "absolute", bottom: "0", fontSize: "0.3rem" }}>
                <div style={{ width: "30%", color: "#999" }}>
                  <Flex justify="start" align="center">
                    <Icon type={require("../../svgs/infor/eye.svg")} size="sm" color="#999" />
                    <span style={{ marginLeft: "0.05rem" }}>检测中心党支部</span>
                  </Flex>
                </div>

                <div style={{ width: "40%", color: "#999" }}>
                  <Flex justify="start" align="center">
                    <Icon type={require("../../svgs/infor/time.svg")} size="xs" color="#999" />
                    <span style={{ marginLeft: "0.05rem" }}>2017-11-10&nbsp;&nbsp;</span>
                  </Flex>
                </div>
              </Flex>
            </div>
          </Flex>
        }
      </div>
    );
  }
}

export default WitNewsItem;
